<template>
  <div id="centerLeft2">
    <chartBox title="“管”">
      <div class="progress_list">
        <div class="progress_item mt-20" v-for="(item,index) in progressList" :key="index">
          <div class="title flex_center" style="justify-content: space-between">
            <div class="txt">{{ item.t }}</div>
            <div class="num float-r">{{ item.n }}</div>
          </div>
          <div class="progress_bar">
            <div class="progress-bar-container">
              <!-- 进度条背景 -->
              <div class="progress-bar">
                <!-- 进度条内容，动态设置宽度 -->
                <div class="progress" :style="{ width: item.w + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </chartBox>
  </div>
</template>

<script>
import chartBox from '_c/chartBox.vue'
import { isNotEmpty } from '@/utils'

export default {
  props: {
    apiData: {}
  },
  watch: {
    apiData: {
      handler(val) {
        if (!isNotEmpty(val)) return
        this.dataFormat(val)
      },
      immediate: true,
      deep: true
    },
  },
  components: {
    chartBox
  },
  data() {
    return {
      progressList: [
        {'t': '流动人口登记', 'n': 0, 'w': 0},
        {'t': '违法出租房处罚', 'n': 0, 'w': 0},
        {'t': '交通现场处罚', 'n': 0, 'w': 0},
        {'t': '核录车辆', 'n': 0, 'w': 0},
        {'t': '社会治安乱象警情', 'n': 0, 'w': 0},
        {'t': '核录人员检查行业场所', 'n': 0, 'w': 0},
      ]
    }
  },
  methods: {
    dataFormat(apiData) {
      // 映射：进度条名称 -> 接口字段
      const mapping = {
        '流动人口登记': 'liuDongRenKouNum',
        '违法出租房处罚': 'chuZuwuNum',
        '交通现场处罚': 'jiaoTongNum',
        '核录车辆': 'heLuCheNum',
        '社会治安乱象警情': 'zhiAnNum',
        '核录人员检查行业场所': 'jianChaChangSuoNum'
      };

      // 记录每项原始宽度，避免后续覆盖；若未设置则设定
      this.progressList.forEach(item => {
        if (item.originalW === undefined) {
          this.$set(item, 'originalW', item.w);
        }
      });

      // 1. 更新每个项的 n 值和 updated 标识，确保响应式更新
      this.progressList.forEach(item => {
        const key = mapping[item.t];
        if (key && Object.prototype.hasOwnProperty.call(apiData, key)) {
          this.$set(item, 'n', apiData[key]);
          this.$set(item, 'updated', true);
        } else {
          this.$set(item, 'updated', false);
        }
      });

      // 2. 获取所有更新项的 n 值，并计算最大值
      const updatedValues = this.progressList
          .filter(item => item.updated)
          .map(item => Number(item.n));
      const maxApiValue = updatedValues.length ? Math.max(...updatedValues) : 0;

      // 3. 使用所有项中最大的原始宽度作为比例参考（修正：统一使用最大宽度）
      const maxOriginalWidth = 100;

      // 4. 根据接口返回的 n 值按比例更新每个进度条的宽度
      // 注意：使用 maxOriginalWidth 作为比例基数，确保即使某些项 originalW 为 0 也能正确计算
      this.progressList.forEach(item => {
        if (item.updated && maxApiValue > 0) {
          const newW = Math.round((Number(item.n) / maxApiValue) * maxOriginalWidth);
          this.$set(item, 'w', newW);
        } else {
          // 若未更新，则还原为原始宽度（或保留为 0）
          this.$set(item, 'w', item.originalW || 0);
        }
      });
    }



  }
}
</script>

<style lang="scss" scoped>
#centerLeft2 {
  //$box-width: 300px;
  //$box-height: 410px;
  //padding: 16px;
  //height: $box-height;
  //min-width: $box-width;

  .progress_list {
    padding: 28px 20px;

    .txt {
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 14px;
    }

    .num {
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 14px;
      text-align: right;
    }

    .progress_item:nth-child(1) {
      margin-top: 0;
    }
  }

  .progress-bar-container {
    width: 100%; /* 父容器宽度 */
    padding: 10px 0;
  }

  .progress-bar {
    height: 8px;
    background: #222836;
    border-radius: 8px;
    position: relative;
    overflow: hidden; /* 防止内容溢出 */
  }

  .progress {
    height: 100%;
    background: linear-gradient(270deg, #bee6f7 0%, #083c82 100%);
    border-radius: 8px;
    transition: width 1s ease-in-out; /* 设置1秒的过渡效果，使进度条平滑展开 */
  }
}
</style>
